<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
  >
    <el-menu-item style="font-size: 30px">蜗牛商学院管理系统</el-menu-item>
    <img 
      :src="img.imgPath" 
      @click="personalCenter"
      style="cursor: pointer;"
    >
    <el-menu-item index="3">{{ teacherName }}</el-menu-item>
    
    <el-menu-item index="4" @click="exit">登出</el-menu-item>
    <el-menu-item index="5">。。。</el-menu-item>
     
  </el-menu>

</template>

<script lang="ts" setup>
import {onMounted, ref,nextTick} from 'vue'
import log from '@/api/log'
//使用pina获取登录的信息
import { TeacherInfo } from "@/stores/counter";
import router from "@/router";
import api from '@/api/teacher';
import defaultAvatar from '@/assets/default.jpg'
const userStore= TeacherInfo();

let teacherName=ref('');
const img = ref({
  imgPath: defaultAvatar
})
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const exit= () => {

  log.findTLoginByLoginName({loginName:userStore.teacherinfo.teacherName})
  localStorage.clear(); 
  userStore.clearUserInfo;
  router.push("/")
}

const personalCenter = () => {
  router.push("/PersonalCenter")
}
const init = async ()=>{
  console.log(userStore.teacherinfo);
  teacherName.value = userStore.teacherinfo.teacherName
  const res = await api.findTeacherByName({ teacherName: userStore.teacherinfo.teacherName })
  if(res.imgPath != null){
    img.value.imgPath = res.imgPath
  }
  console.log("获取头像：" + res)
}
onMounted( () => { 
  nextTick(()=>{
    init();
  })
})
</script>

<style scoped>
img {
  width: 70px;
  height: 70px;
  margin: auto 0;
  border-radius: 50%;
}
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}

.header_name {
  font-size: 36px;
  font-weight: bold;
  color: #e7d7d8;
/* //background: #F0F8FF;  */
  padding: 10px;
}

.headermenu {
/* //position: fixed; 
//width: 100%; */

  img {
    width: 70px;
    height: 70px;
    margin: auto 0;
    border-radius: 50%;
  }
}

.el-menu--horizontal.el-menu {
  height: 14vh;
  background-color: #09111c;
  min-height: 130px;
}

.el-menu--horizontal.el-menu {
  border-bottom: 1px solid #2d3436;
}

.el-menu--horizontal > .el-menu-item {
  color: #f5f6fa;
  font-size: 20px;
}

:deep(.el-menu--horizontal>.el-sub-menu .el-sub-menu__title) {
  color: #ffffff !important;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: #09111c;
}

.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #09111c;
  color: var(--el-menu-active-color) !important;
}
</style>